import {useNavigate} from 'react-router-dom'
import React,{useState} from 'react'
import axios from 'axios'
export default function Search() {
  let navigate = useNavigate()
  let [name,setName] = useState('')
  let [content,setContent] = useState('')
  let [color,setColor] = useState('')
  let btn= async()=>{
    let obj = {name,content,color}
    let res = await axios.post('http://localhost:3000/btn',obj)
    console.log(res);
    navigate('/index')
  }
  return (
    <div style={{width:'100%'}}>
      <div style={{width:'50%',margin:'auto',height:'400px'}}>
        <h3>创建项目</h3>
        <p>
          <span>项目名称</span>
          <br/>
          <input type='text' value={name} onChange={(e)=>setName(e.target.value)} />
          <select onChange={(e)=>setColor(e.target.value)}>
            <option value='red' style={{color:'red'}}>red</option>
            <option value='blue' style={{color:'blue'}}>blue</option>
            <option value='white' style={{color:'white'}}>white</option>
          </select>
        </p>
        <p>
          <span>项目描述</span>
          <br/>
          <textarea cols='20' rows='10' value={content} onChange={(e)=>setContent(e.target.value)}></textarea>
        </p>
        <p>
          <button onClick={btn}>确定</button>
        </p>
      </div>
    </div>
  )
}
